<template>
  <div class="Matrix">
    <canvas id="c"></canvas>
  </div>
</template>

<script>
export default {
  data () {
    return {
      timer: null
    }
  },
  mounted () {
    setTimeout(() => {
      var c = document.getElementById('c')
      var ctx = c.getContext('2d')

      // 全屏
      c.height = window.innerHeight
      c.width = window.innerWidth

      // 文字
      var txts = '豆哥是无敌的存在'
      // 转为数组
      txts = txts.split('')

      var fontSize = 16
      var columns = c.width / fontSize
      // 用于计算输出文字时坐标，所以长度即为列数
      var drops = []
      // 初始值
      for (var x = 0; x < columns; x++) { drops[x] = 1 }

      // 输出文字
      function draw () {
        // 让背景逐渐由透明到不透明
        ctx.fillStyle = 'rgba(0, 0, 0, 0.05)'
        ctx.fillRect(0, 0, c.width, c.height)

        ctx.fillStyle = '#0F0' // 文字颜色
        ctx.font = fontSize + 'px arial'
        // 逐行输出文字
        for (var i = 0; i < drops.length; i++) {
          // 随机取要输出的文字
          var text = txts[Math.floor(Math.random() * txts.length)]
          // 输出文字，注意坐标的计算
          ctx.fillText(text, i * fontSize, drops[i] * fontSize)
          ctx.fillStyle = randomColor()
          // 如果绘满一屏或随机数大于0.95（此数可自行调整，效果会不同）
          if (drops[i] * fontSize > c.height && Math.random() > 0.994) {
            drops[i] = 0
          }
          // 用于Y轴坐标增加
          drops[i]++
        }
      }

      this.timer = setInterval(draw, 33)
      function randomColor () {
        var r = Math.floor(Math.random() * 256)
        var g = Math.floor(Math.random() * 256)
        var b = Math.floor(Math.random() * 256)
        return 'rgb(' + r + ',' + g + ',' + b + ')'
      }
    }, 50)
  },
  beforeDestroy () {
    clearInterval(this.timer)
    this.timer = null
  }
}
</script>

<style lang="less" scoped>
  canvas {
    width: 100%;
    height: 100%;
  }
</style>
